<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟支付宝AR扫福动画</title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        display: flex;
        background: #000;
    }

    svg {
        margin: auto;
        overflow: visible;
        transform: scalex(.9);
    }

    .g-polygon-wrap,
    .g-polygon-move {
        fill: none;
        stroke: #bf303c;
        stroke-width: 2;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

    .g-polygon-move {
        transform-origin: center center;
        transform: scale(1.05);
        stroke: linear-gradinet(180deg, red, transprent);
        stroke-width: 1.5;
        stroke-dasharray: 280, 700;
        stroke-dashoffset: 8;
        animation: move 2.4s infinite linear;
    }

    @keyframes move {
        0% {
            stroke-dashoffset: 8;
        }

        100% {
            stroke-dashoffset: -972;
        }
    }
</style>

<body>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px"
        height="300px">
        <polygon class="g-polygon-wrap" points="150 0, 300 75, 300 225, 150 300, 0 225,  0 75, 150 0" />
        <polygon class="g-polygon-move" points="150 0, 300 75, 300 225, 150 300, 0 225,  0 75, 150 0" />
    </svg>
</body>

</html>